<template>
	<su-popup :show="show" type="center" @maskClick="maskClick">
		<view class="customer ss-flex-col ss-col-top ss-row-center">
			<image :src="sheep.$url.cdn('/static/user/customer-bg.png')" class="bg-img-customer"></image>
			<view class="customer-bottom ss-flex-row ss-row-between ss-col-center">
				<view class="title ss-flex-row ss-row-center ss-col-center">
					<view class="label-1">尝试一下鲸囍客服</view>
					<view class="label-2">在线为您服务</view>
				</view>
				<view class="left-cus ss-flex-row ss-row-center ss-col-center" @click="onlineCustomer">
					<image :src="sheep.$url.cdn('/static/user/online.png')" style="width:30rpx;height:30rpx;margin-right: 30rpx;">
					</image>
					<view class="online-txt left-color">在线客服
					</view>
				</view>
				<view class="right-cus ss-flex-row ss-row-center ss-col-center" @click="callPhone">
					<image :src="sheep.$url.cdn('/static/user/mobile.png')" style="width:30rpx;height:30rpx;margin-right: 30rpx;">
					</image>
					<view class="online-txt right-color">电话咨询
					</view>
				</view>
			</view>
		</view>
	</su-popup>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import sheep from '@/sheep';
  import { showMenuTools, closeKefuModal } from '@/sheep/hooks/useModal';
// #ifdef APP
import imStore from "@/im/store/im.js"
// #endif
  const show = computed(() => sheep.$store('modal').kefu);

  function maskClick() {
  	closeKefuModal()
  }
  
  function callPhone(){
  	
  	closeKefuModal()
  	
  	uni.showModal({
  		title: '提示',
  		content: '即将拨打客服电话',
  		success:function(res){
  			if(res.confirm){
  				uni.makePhoneCall({
  					phoneNumber: '18906531877',
  				})
  			}
  		}
  	})
  	
  	
  }
  
  function onlineCustomer(){
  	
  	closeKefuModal()
  	
  	let to = {
  		aim: 'service',
  		service: {
  			mobile: '18906531877'
  		}
  	}
  	
  	uni.showToast({
  		title:'即将跳转到聊天',
  		icon:'none',
  		duration: 200
  	})
  	
  	setTimeout(()=>{
		// #ifdef APP
			  imStore().webQueryAnalysis(to)
			  // #endif
		// #ifndef APP
		sheep.$router.go( "/im/pages/web?to=" + encodeURIComponent(JSON.stringify(to)))
		// #endif
  	},100)
  	
  	
  }
  
</script>

<style lang="scss" scoped>
 .customer {
 	width: 690rpx;
 	height: 811.76rpx;
 	position:relative;
 	// background-color: red;
 
 	.customer-bottom {
 		height: 90rpx;
 		width: 690rpx;
 		.left-cus{
 			width:calc(690rpx / 2);
 			height:90rpx;
 			border-top: 1rpx solid #E7E7E7;;
 		}
 		.right-cus{
 			width:calc(690rpx / 2);
 			height:90rpx;
 			border-top: 1rpx solid #E7E7E7;
 			border-left: 1rpx solid #E7E7E7;
 		}
 		.left-color{
 			color:#CA9057;
 		}
 		.right-color{
 			color:#4F4F4F;
 		}
 	}
 }
 .online-txt{
 	width: 128rpx;
 	height: 46rpx;
 	opacity: 1;
 	
 	font-family: Source Han Sans;
 	font-size: 32rpx;
 	font-weight: 500;
 	line-height: normal;
 	letter-spacing: 0em;
 	
 	
 }
 
 .bg-img-customer {
 	width: 100%;
 	height: 722rpx;
 }
 .title{
 	position:absolute;
 	width: 690rpx;
 	top:87rpx;
 	.label-1{
 		
 		
 		font-family: Source Han Sans;
 		font-size: 36rpx;
 		font-weight: 500;
 		line-height: normal;
 		letter-spacing: 0em;
 		
 		color: #AFAFAF;
 		margin-right:7rpx;
 	}
 	.label-2{
 		font-family: Source Han Sans;
 		font-size: 36rpx;
 		font-weight: 500;
 		line-height: normal;
 		
 		color: #2E2E2E;
 	}
 	
 }
 .kefu-class{
 	margin-right:-10rpx;
 }
</style>
